<template>
    <NCard>
        <template #header>
            Ai 智能学习建议
        </template>

        <template #header-extra>
            <span style="padding-right: 0.5em;">数据更新于</span>
            <NTime :time="gen_date"></NTime>
        </template>
        <NSpace>
            <div v-html="output"></div>
        </NSpace>
    </NCard>
</template>


<script setup lang="ts">
import {NTime, NSpace, NCard } from "naive-ui";

const props = defineProps(['data']);
import progressApi from '@/api/progress'

// 导入 Markdown 渲染器
import { Marked } from 'marked'
// 导入语法高亮插件
import { markedHighlight } from "marked-highlight";
import "highlight.js/styles/atom-one-light.min.css";
import hljs from 'highlight.js';
import DOMPurify from 'dompurify';
import { onMounted, computed, ref } from "vue";


const content = ref("")
const gen_date = ref(0)

onMounted(() => {
    progressApi.getAiProgress()
        .then(res => {
            // 假设返回内容为 res.content 或直接为字符串
            console.log(res);
            content.value = res.guideline || res;
            gen_date.value = res.date || 0;
        })
        .catch(() => {
            content.value = "获取AI建议失败";
        });
});

const marked = new Marked(
    markedHighlight({
        emptyLangClass: 'hljs',
        langPrefix: 'hljs language-',
        highlight(code, lang, info) {
            const language = hljs.getLanguage(lang) ? lang : 'plaintext';
            return hljs.highlight(code, { language }).value;
        }
    })
);
// 过滤xss并渲染
const output = computed(() => {
    return marked.parse(DOMPurify.sanitize(content.value || ''));
})


function handleChange() {
    window.$utils.message.error("功能未实现")

}


</script>